<template>
	<view>
		<!-- 委托管理 -->
		<view class="bg-white p-4" style="width: 2000rpx;">
			<view class="flex font-md align-center">
				<view @click="selectActive(index)" class="p-2 px-4" :class="active==index?'active':''"
					v-for="(item,index) in navData" :key="index">
					<text>{{item.name}}</text>
					<text>({{item.value}})</text>
				</view>
			</view>
			<view class="p-2 flex" style="background-color: rgb(249,249,249);">
				<view class="flex align-center mr-2">
					<text>委托编号:</text>
					<view class="ml-2" style="border: 6rpx solid #eee;">
						<input type="text">
					</view>
				</view>
				<view class="flex align-center mr-2">
					<text>类型:</text>
					<view class="ml-2">
						<uni-data-select empty-text="暂无发票单号" placeholder="请选择类型" v-model="Selectvalue"
							:localdata="range" @change="change"></uni-data-select>
					</view>
				</view>
				<view class="flex align-center mr-4">
					<text style="white-space: nowrap;">创建时间：</text>
					<view style="width: 500rpx;">
						<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
					</view>
				</view>
				<view class="flex align-center">
					<view class="bg-orange text-white p-2 px-4 mr-2" style="border-radius: 10rpx;">
						查询
					</view>
					<view class="bg-orange text-white p-2 px-4" style="border-radius: 10rpx;">
						重置
					</view>
				</view>
			</view>
			<view class="flex my-2">
				<view class="bg-orange text-white p-2 px-4 mr-2" style="border-radius: 10rpx;">
					销售委托申请
				</view>
				<view class="bg-orange text-white p-2 px-4 mr-2" style="border-radius: 10rpx;">
					采购委托申请
				</view>
			</view>
			<view class="">
				<!-- 表格 -->
				<view class="mt-2 flex flex-column">
					<view class="w-100 flex font-sm font-weight-bold"
						style="background-color: rgb(245,245,245);height: 80rpx;">
						<view class="text-center" style="width: 6%;line-height: 80rpx;">
							<label>
								<checkbox value="cb" />
							</label>
						</view>
						<view class="text-center" style="width: 7%;line-height: 80rpx;">
							<text>序号</text>
						</view>
						<view class=" text-center" style="width: 12%;line-height: 80rpx;">
							<text>委托编号</text>
						</view>
						<view class=" text-center" style="width: 7%;line-height: 80rpx;">
							<text>类型</text>
						</view>
						<view class=" text-center" style="width: 7%;line-height: 80rpx;">
							<text>品种</text>
						</view>
						<view class=" text-center" style="width: 7%;line-height: 80rpx;">
							<text>等级</text>
						</view>
						<view class=" text-center" style="width: 7%;line-height: 80rpx;">
							<text>数量(吨)</text>
						</view>
						<view class=" text-center" style="width: 12%;line-height: 80rpx;">
							<text>价格(元/吨)</text>
						</view>
						<view class=" text-center" style="width: 7%;line-height: 80rpx;">
							<text>价格类型</text>
						</view>
						<view class=" text-center" style="width: 7%;line-height: 80rpx;">
							<text>合同模板</text>
						</view>
						<view class=" text-center" style="width: 12%;line-height: 80rpx;">
							<text>创建日期</text>
						</view>
						<view class=" text-center" style="width: 7%;line-height: 80rpx;">
							<text>状态</text>
						</view>
						<view class=" text-center" style="width: 7%;line-height: 80rpx;">
							<text>操作</text>
						</view>
					</view>
					<view v-if="false" style="height: 200rpx;" class="w-100 flex justify-center align-center">
						暂无数据
					</view>
					<view v-else class="flex" style="height: 150rpx;border-bottom:2rpx solid rgb(221,221,211);"
						v-for="(item,index) in 4" :key="index">
						<view class="text-center flex align-center justify-center" style="width: 6%;">
							<label>
								<checkbox value="cb" />
							</label>
						</view>
						<view class=" flex justify-center align-center" style="width: 7%;line-height: 70rpx;">
							<text>{{index+1}}</text>
						</view>
						<view class=" flex justify-center align-center" style="width: 12%;line-height: 70rpx;">
							<text>31</text>
						</view>
						<view class=" flex justify-center align-center" style="width: 7%;line-height: 70rpx;">
							<text>已结束</text>
						</view>
						<view class=" flex justify-center align-center" style="width: 7%;line-height: 70rpx;">
							<text>大豆油</text>
						</view>
						<view class=" flex justify-center align-center" style="width: 7%;line-height: 70rpx;">
							<text>优</text>
						</view>
						<view class="flex align-center justify-center" style="width: 7%;line-height: 70rpx;">
							<view class="flex justify-center">
								<text class="text-orange">65</text>
							</view>
						</view>
						<view class="flex align-center justify-center " style="width: 12%;line-height: 70rpx;">
							<view class="flex justify-center w-100">
								<text class="text-ellipsis">100</text>
							</view>
						</view>
						<view class="flex align-center justify-center" style="width: 7%;line-height: 70rpx;">
							<view class="flex justify-center">
								<text>高</text>
							</view>
						</view>
						<view class="flex align-center justify-center" style="width: 7%;line-height: 70rpx;">
							<view class="flex justify-center">
								<text>张三</text>
							</view>
						</view>
						<view class="flex align-center justify-center" style="width: 12%;line-height: 70rpx;">
							<view class="flex justify-center">
								<text>2018-08-31</text>
							</view>
						</view>
						<view class="flex align-center justify-center" style="width: 7%;line-height: 70rpx;">
							<text>已结束</text>
						</view>
						<view class="flex align-center justify-center" style="width: 7%;line-height: 70rpx;">
							<button class="font-sm bg-success text-white flex justify-center align-center"
								style="white-space: nowrap; width: 100rpx;height: 100rpx;">查看</button>
							<button class="font-sm bg-danger text-white flex justify-center align-center"
								style="white-space: nowrap;width: 100rpx;height: 100rpx;">删除</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "DelegatedManagement",
		data() {
			return {
				datetimerange: [],
				range: [{
						value: 0,
						text: "全部"
					},
					{
						value: 1,
						text: "采购"
					},
					{
						value: 2,
						text: "销售"
					},
				],
				Selectvalue: '',
				active: 0,
				navData: [{
						name: '全部',
						value: 0
					},
					{
						name: '待审核',
						value: 0
					},
					{
						name: '审核通过',
						value: 0
					},
					{
						name: '已驳回',
						value: 0
					},
					{
						name: '待提交',
						value: 0
					},
				]
			};
		},
		methods: {
			selectActive(index) {
				this.active = index
			},
			change(e) {
				console.log(e)
			},
		}
	}
</script>

<style lang="scss">
	.active {
		color: #fc7c08;
		font-size: 40rpx;
		background-color: rgb(249, 249, 249);
	}
</style>